<template>
    <!-- 模态框遮罩层 -->
    <div v-if="show" class="modal-overlay">
        <!-- 模态框内容 -->
        <div class="modal">
            <!-- 标题 -->
            <h2 class="modal-title">编辑电影</h2>
            <!-- 输入组 -->
            <div class="input-group">
                <!-- 标题输入 -->
                <input v-model="editedMovie.title" placeholder="电影标题" class="input-field" />
                <!-- 年份输入 -->
                <input v-model="editedMovie.year" placeholder="上映年份" class="input-field" />
                <!-- 导演输入 -->
                <input v-model="editedMovie.director" placeholder="导演" class="input-field" />
                <!-- 类型输入 -->
                <input v-model="editedMovie.genre" placeholder="类型" class="input-field" />
            </div>
            <!-- 按钮组 -->
            <div class="modal-button-group">
                <!-- 保存按钮 -->
                <button @click="saveMovie" class="save-button">
                    保存
                </button>
                <!-- 取消按钮 -->
                <button @click="cancelEdit" class="cancel-button">
                    取消
                </button>
            </div>
        </div>
    </div>
</template>
<script setup>
// 引入 Vue 3 的核心 API
import { defineProps, defineEmits, ref, watch } from 'vue';
// 定义组件接收的 props
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
        description: '控制模态框显示状态'
    },
    movie: {
        type: Object,
        required: true,
        description: '待编辑的电影数据'
    }
});
// 定义组件触发的事件
const emits = defineEmits([
    'save-movie', // 保存事件
    'cancel-edit' // 取消事件
]);
// 响应式的编辑后电影对象
const editedMovie = ref({ ...props.movie });
// 监听父组件传递的 movie 变化
watch(() => props.movie, (newMovie) => {
    editedMovie.value = { ...newMovie }; // 更新编辑状态
}, { deep: true });
// 保存编辑方法
const saveMovie = () => {
    emits('save-movie', { ...editedMovie.value }); // 触发保存事件
};
// 取消编辑方法
const cancelEdit = () => {
    emits('cancel-edit'); // 触发取消事件
};
</script>
<style scoped>
/* 遮罩层样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 模态框样式 */
.modal {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 24px;
    width: 400px;
    max-width: 90%;
}

/* 标题样式 */
.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

/* 输入组样式 */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 输入框样式 */
.input-field {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
}

/* 按钮组样式 */
.modal-button-group {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* 保存按钮样式 */
.save-button {
    background-color: #28a745;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.save-button:hover {
    background-color: #218838;
}

/* 取消按钮样式 */
.cancel-button {
    background-color: #6c757d;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cancel-button:hover {
    background-color: #5a6268;
}
</style>